<!DOCTYPE html>
<html>
<head>
	<% include link %>
	<link rel="stylesheet" type="text/css" href="/css/user.css">
	<link rel="stylesheet" type="text/css" href="/bower_components/cropper/dist/cropper.css">
	<script src="/js/imagecropper.js"></script>
</head>
<body>
	<% include head %>
	<div class="myself-top-head">
		<img src="/images/myselfTitle.png" class="myself-top-img">
	</div>
	<div class="container">
		<div class="row ">
			<% include usermodle %>
	  		<div class="col-md-8  body-right">
	  			<span class="body-right-titlesp"></span>
	  			<p class="body-right-title">&nbsp;&nbsp;我的信息</p>
				<div class="myself-body-div">
					<div class="form-horizontal">
						<div class="form-group">
							<label for="exampleInputFile" class="col-sm-2 control-label">我的头像:</label>
							<div class="col-sm-10">
								<div id="myself-head">
									<a href="#" class="thumbnail myself-head-a" >
										<img id="showUpHead" style="height:100%;width:100%;" src="<%-user.headImgUrl%>" >
									</a>
									<div id="myself-head-up" class="myself-head-up">
										<p data-toggle="modal" data-target="#myModal">修改头像</p>
									</div>
								</div>
								
							</div>
						</div>
					</div>
					<div class="form-horizontal" >
						<div class="form-group">
							<label for="myself-username" class="col-sm-2 control-label">用户名:</label>
							<div class="col-sm-10">
								<p style="padding-top: 7px;"><%-user.name%></p> 
							</div>
						</div>
						<div class="form-group">
							<label for="myself-motto" class="col-sm-2 control-label">我的签名:</label>
							<div class="col-sm-10">
								<textarea class="form-control" id="myself-usermotto" rows="3" placeholder="这个人很懒，什么都没有写..." name="usermotto"><%-user.motto%></textarea>
							</div>
						</div>
						<div class="form-group">
							<label for="sex-examplela"  class="col-sm-2 control-label">性别:</label>
							<ul class="sextag col-sm-10">
								<li data-tag="bsex">男</li>
								<li data-tag="gsex">女</li>
								<li data-tag="nsex">保密</li>
							</ul>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-5 col-sm-2">
								<button id="all-save" class="btn btn-info active">保存我的信息</button>
							</div>
						</div>
					</div>
				</div>
	  		</div>
		</div>
	</div>

	<% include foot %>
	<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
					<h4 class="modal-title" id="myModalLabel">上传封面</h4>
				</div>
				<div class="modal-body">
					<a href="javascript:void(0);" id="article-img-a" class="thumbnail" style="margin:0px auto;width:100%;height: 500px; ">
					</a>
					<input id="img_file" type="file" accept="image/*" id="imgFile" name='imgFile'  onchange="selectImage(this);">	
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="article_save_img" type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
				</div>
			</div>
		</div>
	</div>
<script src="/bower_components/cropper/dist/cropper.js"></script>
<script type="text/javascript">

	var imgPath = ''
	var sextag ='';
	
	if('<%- user.sex%>'){
		sextag = '<%- user.sex%>';
	} else {
		sextag = 'nsex';
	}
	
	$('li[data-tag='+sextag+']').addClass("sexon");
	
	$('.sextag li').click(function(){
		$('.sextag li').removeClass("sexon");
		$(this).addClass("sexon");
		sextag = $(this).data('tag');
	});

	function selectImage(file) {
		if (!file.files || !file.files[0]) {
			return;
		}
		var reader = new FileReader();
		reader.onload = function (evt) {
			$('#article-img-a').html('<img id="myimg" src="'+evt.target.result+'">');
			imageload(1,1,$("#myimg"));
			btnload();
		}
		reader.readAsDataURL(file.files[0]);
	}

	function btnload(){
		$("#article_save_img").on("click", function() {  
			var src = $image.eq(0).attr("src");  
			var canvasdata = $image.cropper("getCanvasData");  
			var cropBoxData = $image.cropper('getCropBoxData');
			convertToData(src, canvasdata, cropBoxData, function(basechar) {
				$('#showUpHead').attr("src", basechar);
				imgPath = basechar;
		    });
			setTimeout(function(){
				$.ajax({
					type:'put',
					url:'/user/myself/head',
					data:{
						'user':user,
						'imgPath':imgPath
					},
					success:function(data){
						window.location.href='/user/myself'
					}
				})
			},500)
		})
	}

	var headImgUrl = '<%-user.headImgUrl%>';

	$('#user-myself').addClass("active");
	$('#myself-head-up').click(function() {
		$("#myself-head-more").show();
	});

	$('#saveimg').click(function(){
		submit('imgFile')
	});

	$('#all-save').click(function() {
		var usermotto = $('#myself-usermotto').val();
		if (usermotto!='' && sextag!='' ) {
			$.ajax({
				url:'/user/myself',
				type:'post',
				data:{
						'usermotto':usermotto,
						'sex':sextag,
					},
				success: function(date){
					// console.log(date);
					window.location.href="/user"; 
				}
			});
		} else {
			
		}
	});

	function submit(fileType){
		var fileObj = document.getElementById(fileType).files[0];
		var forms = new FormData();
		forms.append("file", fileObj);
		var xhr = new XMLHttpRequest();
		xhr.open("post", '/user/userhead', true);
		if (fileObj!=null) {
			$('#saveimg').popover('hide');
			if (fileType == 'imgFile') {
				progress('#myprogress')
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && xhr.status == 200){    
						var b = xhr.responseText;
						var st = JSON.parse(b)
						successBackImg(st.paths)
					}
				}
				xhr.onload = function (date) {
					// console.log(date)
					bar.css({'width':'100%'})
					status++
					clearInterval(time)
					
				};
				xhr.send(forms)
			} 
		} else {
			$('#saveimg').popover('show');
		}
	}

	function progress(barId){
		bar = $(barId);
		time = setInterval(function(){
			$.get("/user/userhead/ajax",function(result){
				if (result.jin == 100) {
					return;
				} else {
					bar.css({'width':result.jin+'%'})
				}
			})
		},1000);
	}

	function successBackImg(imgUrl){
		headImgUrl = '/user/'+imgUrl;
		$('#showUpHead').attr({'src':headImgUrl});
	}


</script>
</body>
</html>
